<template>

	<view class="ListView">
		<view class="content">

			<z-paging ref="paging" v-model="dataList" @query="queryList" :topZIndex="99999" :bottomZIndex="999999">
				<template #top>

					<!-- 悬浮按钮_扫码 -->

					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="80" @btnClick="add">
						<template #BtnContent>
							<u-icon name="plus" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>
					<u-navbar :fixed="false" title="模具管理" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
						leftIconColor="#fff" style="width: 100%;">
						<view class="u-nav-slot" slot="right">
							<m-capsule></m-capsule>
						</view>
					</u-navbar>

					<view class="TabsBox">
						<m-scroll-tag @tabChange="changeTab" :tagsList="BYStatusList" bgColor="#52b583">
							<view slot="right">
								<view class="IconBoxs x-f">
									<view class="x-end">
										<uni-icons fontFamily="CustomFontPlatform"
											style="margin-left: 14px;font-weight: 600;" color="#999"
											@click="OpenFilterPopup"
											:size="20">{{$utils.toUniCode('&#xe628;')}}</uni-icons>

									</view>
								</view>
							</view>
						</m-scroll-tag>
					</view>
				</template>

				<view style="padding: 0 10px;">
					<view class="CardBox" @click="itemClick(row,index)" v-for="(row, index) in dataList" :key="index">
						<view class="CardMainBox">

							<view class="CardTop">
								<view class="OrderStatus" :class="GetStatusBackClass(row.BYStatus)">
									{{row.BYStatusName}}
								</view>
							</view>

							<view style="color:black;font-size:28rpx;margin-top:8px">
								<text>{{row.BillNO}}</text>
							</view>
							<view style="margin-top: 8px;">
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="保养单号:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.BillNO}}</text>
										</view>
									</template>
								</m-field>

								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="保养模具:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.MoludName}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="开始时间:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.StartMaintenance}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="结束时间:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.EndMaintenance}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="保养人:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.UpkeepMan}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="保养状态:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.BYStatusName}}</text>
										</view>
									</template>
								</m-field>
							</view>


						</view>
					</view>

				</view>
				<template #bottom>
					<tab-bar ref="tabbar" :backData='moduleData_show' :groups='groups'></tab-bar>
				</template>

			</z-paging>
		</view>

		<u-popup class="MainPopup" :show="ShowFilterPopup" mode="bottom" :round="12" zIndex="999999"
			@close="closeFilterPopup">
			<view class="f-dc" style="height: 50vh;" :style="$utils.disposeSafeBottomFun()">

				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="PopupMainBox">
					<view>
						<view class="TitleBox">
							<text>起止时间</text>
						</view>

						<view class="CheckBox">
							<view class="My_Picker_Box">
								<view class="PickMainBox">
									<u-icon name="calendar" color="#c0c4cc" size="24"></u-icon>
									<view @click="addTime('开始')" class="My_Picker_Text">
										<text>{{FormData.FBDate}}</text>
									</view>
									<text>至</text>
									<view @click="addTime('结束')" class="My_Picker_Text">
										<text>{{FormData.FEDate}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="BottomBox">
					<button class="SubBtn" @click="submit">确认</button>
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel='show = false'
				@confirm='pickerConfirm'></u-datetime-picker>
		</u-popup>

	</view>
</template>

<script>
	import TabBar from '@/st_mold/common/TabBar.vue'; // 引入底部导航栏组件
	import {
		formatDateTime,
		getTimeStamp,
		getFormatDateTime,
		getBefore7DateTime
	} from '@/st_mold/common/base.js';
	export default {
		components: {
			TabBar
		}, // 注册组件
		data() {
			return {
				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
				ShowFilterPopup: false, //弹层筛选是否显示
				moduleData_show: [], //底部导航栏总数组
				groups: [], //底部导航栏数组，分成三个
				disabled: false, //按钮是否警用
				dataList: [], //列表

				FormData: {
					PageIndex: 1,
					PageSize: 30,
					FBDate: '',
					FEDate: '',
					BYStatus: -1
				},
				TimeName: '', //时间名称
				show: false, //时间刷筛选是否显示
				value1: Number(new Date()), //时间值
				// 列表顶部展示
				BYStatusList: [{
						name: '全部',
						value: -1
					},
					{
						name: '未开始保养',
						value: 0
					},
					{
						name: '已开始保养未结束',
						value: 1
					},
					{
						name: '已结束保养',
						value: 2
					}
				],

			}

		},
		onLoad() {

			this.FormData.FBDate = getBefore7DateTime() //开始时间
			this.FormData.FEDate = getFormatDateTime(new Date()) //结束时间
			this.moduleData_show = this.$store.state.CRaftModule.ModuleData //底部导航栏总数组
			this.groups = this.$store.state.CRaftModule.groups //底部导航栏数组，分成三个
		},
		onShow() {
			// 重新加载列表
			this.getList
		},
		onUnload() {

		},
		mounted() {
			var that = this;
			that.$nextTick(() => {
				setTimeout(() => {
					that.BtnShow = true;
				}, 500)
			})

		},
		methods: {
			closeFilterPopup() { // 关闭筛选弹层
				this.ShowFilterPopup = false;
			},
			OpenFilterPopup() { // 点击打开筛选
				this.ShowFilterPopup = true;
			},
			changeTab(item) { // 切换tab任务
				var that = this;

				that.FormData.BYStatus = item.data.value
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},
			GetStatusBackClass(data) { // 根据传入的单据状态值，返回对应的class
				return 'OrderStatus_' + data
			},
			// 重新加载列表
			getList() {
				let that = this;
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},

			//获取时间
			addTime(name) {
				this.TimeName = name
				if (this.TimeName == '开始') {
					this.value1 = Number(getTimeStamp(this.FormData.FBDate))
				} else {
					this.value1 = Number(getTimeStamp(this.FormData.FEDate))
				}
				this.show = true
			},
			//获取点击的时间进行赋值
			pickerConfirm(e) {
				var time = getFormatDateTime(e.value)
				if (this.TimeName == '开始') {
					this.FormData.FBDate = time
				} else {
					this.FormData.FEDate = time
				}
				this.show = false
			},

			// 筛选提交 重新加载
			submit() {
				this.ShowFilterPopup = false
				this.contents = []; // 假设这是异步获取数据的操作
				this.$refs.paging.reload();
			},
			// 新增
			add() {
				var url = './maintenanceDetail'
				this.GonavigateTo(url)
			},
			// 列表数据
			queryList(pageNo) {
				let that = this;
				that.FormData.PageIndex = pageNo
				uni.showLoading({
					title: '加载数据中...',
				});
				try {
					that.Request.request('getUpkeepMouldList', this.FormData, function(ret) {
						console.log(ret);
						if (ret.status == 200) {
							uni.hideLoading();
							ret.data.ds.map((item) => {
								
								item.StartMaintenance = formatDateTime(item.StartMaintenance)
								item.EndMaintenance = formatDateTime(item.EndMaintenance)
							})
							that.$refs.paging.complete(ret.data.ds);
						}
					})
				} catch (e) {
					uni.hideLoading();
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
				}
			},
			// 点击列表详情
			itemClick(item, index) {
				var url = `./maintenanceDetail?UpkeepMouldID=${item.UpkeepMouldID}`
				this.GonavigateTo(url)
			},
			//跳转
			GonavigateTo(url) {
				let that = this;
				if (that.disabled == false) {

					that.disabled = true
					uni.navigateTo({
						url: url,
						animationType: 'slide-in-right', // 动画类型
						animationDuration: 300 // 动画时长
					});

					// 2秒后恢复点击
					setTimeout(() => {
						that.disabled = false
					}, 2000)
				}

			},

		}
	}
</script>

<style lang="scss">
	@import "./css/index.scss";
</style>